<!DOCTYPE html>
<html lang="en">
<style>
pre {
    background: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}
#page-wrapper {
    border-top: 5px solid #69c773;
    margin: 1em auto;
    width: 600px;
}
</style>

<script>
window.onload = function() {
    function $(selector) {
        return document.querySelector(selector);
    }
    
    function sendCmd(){
	    var cmd = $('#sensorName').value +
				  "," + $('#tX').value +
				  "," + $('#tY').value +
				  "," + $('#tZ').value +
				  "," + $('#rX').value +
				  "," + $('#rY').value +
				  "," + $('#rZ').value + ';';
        socket.send(cmd);
        $('#messages').innerHTML = 'Sent:<br>' +cmd+ '<br>';
    }
    
    var socket = new WebSocket('ws://127.0.0.1:7890');
    socket.onopen = function(event) {
        $('#messages').innerHTML = 'Connected<br>';
    };
    socket.onmessage = function(event) {
        $('#messages').innerHTML = 'Received:<br>' + event.data + '<br>';
    };
    socket.onclose = function(event) {
        $('#messages').innerHTML = 'Disconnected ' + event.reason;
    };

    $('#submit').onclick = function(e) {
        socket.send($('#message').value);
        $('#messages').innerHTML = 'Sent:<br>' + $('input').value + '<br>';
        $('input').value = '';
    };

    $('#btnSET').onclick = function(e) {
    	sendCmd();
    };

    $('#btnReset').onclick = function(e)
    {
	    $('#tX').value = 0;
	    $('#tY').value = 0;
	    $('#tZ').value = 0;
	    $('#rX').value = 0;
	    $('#rY').value = 0;
	    $('#rZ').value = 0;
    };
    
    var nD = 5;
    
    $('#tXp').onclick = function(e)
    {
        $('#tX').value = parseFloat($('#tX').value, nD) + parseFloat($('#dV').value, nD);
    	sendCmd();
    };        
    
    $('#tXm').onclick = function(e)
    {
        $('#tX').value = parseFloat($('#tX').value, nD) - parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#tYp').onclick = function(e)
    {
        $('#tY').value = parseFloat($('#tY').value, nD) + parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#tYm').onclick = function(e)
    {
        $('#tY').value = parseFloat($('#tY').value, nD) - parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#tZp').onclick = function(e)
    {
        $('#tZ').value = parseFloat($('#tZ').value, nD) + parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#tZm').onclick = function(e)
    {
        $('#tZ').value = parseFloat($('#tZ').value, nD) - parseFloat($('#dV').value, nD);
    	sendCmd();
    };


    $('#rXp').onclick = function(e)
    {
        $('#rX').value = parseFloat($('#rX').value, nD) + parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#rXm').onclick = function(e)
    {
        $('#rX').value = parseFloat($('#rX').value, nD) - parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#rYp').onclick = function(e)
    {
        $('#rY').value = parseFloat($('#rY').value, nD) + parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#rYm').onclick = function(e)
    {
        $('#rY').value = parseFloat($('#rY').value, nD) - parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#rZp').onclick = function(e)
    {
        $('#rZ').value = parseFloat($('#rZ').value, nD) + parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
    $('#rZm').onclick = function(e)
    {
        $('#rZ').value = parseFloat($('#rZ').value, nD) - parseFloat($('#dV').value, nD);
    	sendCmd();
    };
    
};
</script>

<div id="page-wrapper">
    <pre id="messages">Connecting...</pre>
    
    <button id="btnSET" style="WIDTH: 100px; HEIGHT: 50px">SET</button>
    <button id="btnReset" style="WIDTH: 100px; HEIGHT: 50px">Reset</button>
    </br></br>

	Sensor:
    <input id="sensorName" style="WIDTH: 100px; HEIGHT: 50px" value=0>
	Increment:
    <input id="dV" style="WIDTH: 100px; HEIGHT: 50px" value=0.001>
    </br>

	Translation
    </br>

    X:
    <input id="tX" style="WIDTH: 100px; HEIGHT: 50px" value=0>
    <button id="tXp" style="WIDTH: 50px; HEIGHT: 50px">+</button>
    <button id="tXm" style="WIDTH: 50px; HEIGHT: 50px">-</button>    
    </br>
    
    Y:
    <input id="tY" style="WIDTH: 100px; HEIGHT: 50px" value=0>
    <button id="tYp" style="WIDTH: 50px; HEIGHT: 50px">+</button>
    <button id="tYm" style="WIDTH: 50px; HEIGHT: 50px">-</button>    
    </br>

    Z:
    <input id="tZ" style="WIDTH: 100px; HEIGHT: 50px" value=0>
    <button id="tZp" style="WIDTH: 50px; HEIGHT: 50px">+</button>
    <button id="tZm" style="WIDTH: 50px; HEIGHT: 50px">-</button>    
    </br>

    </br>

	Rotation
    </br>

    X:
    <input id="rX" style="WIDTH: 100px; HEIGHT: 50px" value=0>
    <button id="rXp" style="WIDTH: 50px; HEIGHT: 50px">+</button>
    <button id="rXm" style="WIDTH: 50px; HEIGHT: 50px">-</button>    
    </br>

    Y:
    <input id="rY" style="WIDTH: 100px; HEIGHT: 50px" value=0>
    <button id="rYp" style="WIDTH: 50px; HEIGHT: 50px">+</button>
    <button id="rYm" style="WIDTH: 50px; HEIGHT: 50px">-</button>    
    </br>

    Z:
    <input id="rZ" style="WIDTH: 100px; HEIGHT: 50px" value=0>
    <button id="rZp" style="WIDTH: 50px; HEIGHT: 50px">+</button>
    <button id="rZm" style="WIDTH: 50px; HEIGHT: 50px">-</button>    
    </br>

    </br>

    </br>
    </br>
    <input id="message" required>
    <button id="submit">Send Message</button>
</div>

